<template>
	<view class="outer">
		<!-- 头部 -->
		<view class="header">
			<view class="header-swiper">
				<swiper class="swiper" circular :indicator-dots="true">
					<swiper-item class="swiper-item">
						<img class="item-img" :src="serviceDetails.imageUrl" alt="" />
					</swiper-item>
				</swiper>
			</view>
			<view class="title">
				<view class="title-text">
					{{serviceDetails.name}}
				</view>
			</view>
			<view class="price">
				<view class="price-text">
					价格 : <span>{{serviceDetails.price}}人民币</span>
				</view>
			</view>
		</view>
		<view class="table">
			<!-- 表格 -->
			<view class="center">
				<view class="table-top">
					<view class="table-top-text">
						<view class="table-top-left"></view>
						<view class="">
							服务简介
						</view>
					</view>
					<view class="table-top-center">
						{{serviceDetails.floralLanguage}}
					</view>
				</view>
			</view>
			<!-- 表格 -->
			<view class="center">
				<view class="table-top">
					<view class="table-top-text">
						<view class="table-top-left"></view>
						<view class="">
							费用说明
						</view>
					</view>
					<view class="table-top-center">
						{{serviceDetails.material}}{{serviceDetails.packing}}
					</view>
				</view>
			</view>
		</view>

		<!-- 底部三个点击按钮 -->
		<view class="footer">
			<view class="footer-left">
				<!-- 咨询按钮 -->
				<view class="footer-consult">
					<uni-icons color="#22b589" type="chatboxes-filled" size="25"></uni-icons>
					咨询
				</view>
				<!-- 行程 -->
				<view class="footer-trip" @click="goTrip">
					<uni-icons color="#22b589" type="calendar-filled" size="25"></uni-icons>
					行程
				</view>
			</view>

			<!-- 加入行程 -->
			<view class="footer-add" @click="addtrip">
				<button size="mini" class="footer-add-btn">
					加入我的行程
				</button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		reqGetServiceDetails,
		reqAddTrip
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				cardid: '', //根据id渲染详情
				serviceDetails: {} //服务详情
			}
		},
		onLoad(option) {
			this.cardid = option.cardid;
			this.getServiceDetails();
		},
		methods: {
			async getServiceDetails() {
				const result = await reqGetServiceDetails(this.cardid);
				if (result.code === 200) {
					this.serviceDetails = result.data;
				}
			},
			goTrip() {
				uni.reLaunch({
					url: '/pages/trim/index'
				})
			},
			async addtrip() {
				const result = await reqAddTrip(this.cardid,1);
				uni.reLaunch({
					url: '/pages/trim/index'
				})
				uni.showToast({
					title:'添加成功',
					icon:'success'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.outer {
		background-color: #eee;

		.header {
			.header-swiper {
				.swiper {
					.swiper-item {
						width: 100%;

						.item-img {
							width: 100%;
						}
					}

				}
			}

			.title {
				.title-text {
					margin: 20rpx;
					font-weight: 600;
					font-size: 36rpx;
				}
			}

			.price {
				margin: 20rpx;

				.price-text {
					span {
						color: red;
						font-size: 38rpx;
						font-weight: 700;
					}
				}
			}
		}

		.table {
			height: 700rpx;
			background-color: #eee;

			.center {
				margin: 20rpx;
				background-color: white;

				.table-top {
					border: 2rpx solid #999;

					.table-top-text {
						border-bottom: 2rpx solid #ccc;
						display: flex;

						.table-top-left {
							width: 10rpx;
							height: 40rpx;
							background-color: green;
							margin-right: 10rpx;
						}
					}

					.table-top-center {
						height: 180rpx;
						max-height: 220rpx;
						padding: 20rpx;
					}
				}
			}

		}



		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			display: flex;
			border-top: 2rpx solid #ccc;
			padding: 10rpx;
			align-items: center;

			.footer-left {
				margin: 20rpx;
				width: 60%;
				display: flex;

				.footer-consult {
					width: 50%;
				}

				.footer-trip {
					width: 50%;
				}
			}

			.footer-add {
				border-left: 2rpx solid #eee;
				width: 40%;
				height: 60rpx;
				display: flex;
				align-items: center;

				.footer-add-btn {
					background-color: #22b589;
					color: white;
				}
			}
		}
	}
</style>